<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单详情',
  },
}
</route>

<template>
  <wd-navbar title="订单详情" left-text="" left-arrow @click-left="handleClickLeft"></wd-navbar>
  <view class="orders flex flex-col px-4 mt-11">
    <order-item v-for="(item, index) in orderList" :key="index" :order="item"></order-item>
  </view>
  <view class="title">订单信息</view>
  <view class="detail mx-4">
    <view class="detail-item px-3.5 flex flex-items-center justify-between">
      <view class="detail-item-left">订单号</view>
      <view class="detail-item-right flex flex-items-center">
        <text>124520024120115308970</text>
        <img class="ml-1" src="@/static/app/custom-icon/semiDesign-semi-icons-copy.png" alt="" />
      </view>
    </view>
    <view class="detail-item px-3.5 flex flex-items-center justify-between">
      <view class="detail-item-left">支付时间</view>
      <view class="detail-item-right flex flex-items-center">
        <text>2024-12-01</text>
      </view>
    </view>
    <view class="detail-item px-3.5 flex flex-items-center justify-between">
      <view class="detail-item-left">联系管理员</view>
      <view class="detail-item-right flex flex-items-center">
        <text>联系校区管理员</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const handleClickLeft = () => {
  uni.navigateBack()
}

const orderList = ref([
  {
    avatar: new URL('@/static/app/custom-icon/avatar1.png', import.meta.url).href,
    name: '快递代取',
    time: '3分钟前',
    status: '待接单',
    timeLeft: '距离结束：01：57：00',
    type: '小件',
    number: '1个',
    timeExpect: '期望送达：15：25之前',
    remark: '不限性别',
    startAddress: '快递点：菜鸟驿站',
    endAddress: '宿舍楼-学生宿舍楼43栋-608',
    isShow: true,
    money: '金额2元',
  },
])
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 0.88rem;
  margin-left: 1.88rem;
  font-family: PingFangSC-regular;
  font-size: 1.13rem;
  line-height: 1.56rem;
  color: rgba(16, 16, 16, 1);
  text-align: lear;
}
.detail {
  height: 8.38rem;
  padding-top: 0.88rem;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0.63rem;
  box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(147, 210, 243, 0.99);
  .detail-item {
    margin-bottom: 0.75rem;
    // line-height: 1.5rem;
    .detail-item-left {
      font-family: PingFangSC-bold;
      font-size: 0.88rem;
      line-height: 0.75rem;
      color: rgba(79, 79, 79, 1);
      text-align: left;
    }
    .detail-item-right {
      font-family: PingFangSC-bold;
      font-size: 0.88rem;
      color: rgba(190, 190, 190, 1);
      text-align: left;
      img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
}
</style>
